<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{userinfo}}</h3>
        <h3>用户名 {{userinfo.username}} 年龄 {{userinfo.userage}}</h3>
        <h3>爱好{{userinfo.hobby}} </h3>
        <button @click="add">添加爱好</button>

        <div v-for="item  in  userinfo">
            {{item}}
        </div>
        <div v-for="(item,attr)  in  userinfo">
                {{attr}}   {{item}}
        </div>
        <div v-for="(item,attr,index)  in  userinfo">
          {{index}}  {{attr}}   {{item}}
    </div>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            userinfo:{
                username:"leson",
                userage:18
            }
        },
        methods:{
            add(){
               // this.userinfo.hobby = "睡觉"  //不行  剩下三种都可以

                // this.userinfo = {username:"leson",userage:18,hobby:"睡觉"}
                // this.userinfo = {...this.userinfo,hobby:"睡觉"}
                this.$set(this.userinfo,"hobby","睡觉");
            }
        }
    })
        
</script>
</html>